import React from 'react'

// 这是一个测试组件，用于验证数学公式渲染功能
const MathTest = () => {
  // 数学公式组件
  const MathFormula = ({ formula, isBlock = false }) => {
    const renderFormula = (formula) => {
      if (!formula || typeof formula !== 'string') {
        return '公式解析错误'
      }
      
      // 处理常见的数学符号和公式
      let processedFormula = formula
        .replace(/CAGR/g, '<span class="font-semibold text-blue-600">CAGR</span>')
        .replace(/FV/g, '<span class="text-green-600 font-semibold">FV</span>')
        .replace(/PV/g, '<span class="text-red-600 font-semibold">PV</span>')
        .replace(/\\frac\{([^}]+)\}\{([^}]+)\}/g, '<div class="inline-block text-center mx-2"><div class="border-b border-gray-600 pb-1 px-2">$1</div><div class="pt-1 px-2">$2</div></div>')
        .replace(/\^(\{[^}]+\}|\w+)/g, '<sup class="text-xs">$1</sup>')
        .replace(/\{([^}]+)\}/g, '$1')
        .replace(/\\left\(/g, '<span class="text-2xl font-light">(</span>')
        .replace(/\\right\)/g, '<span class="text-2xl font-light">)</span>')
        .replace(/\\left/g, '')
        .replace(/\\right/g, '')
        .replace(/\\approx/g, '≈')
        .replace(/\\times/g, '×')
        .replace(/\\div/g, '÷')
        .replace(/\\pm/g, '±')
        
      return processedFormula
    }
    
    if (isBlock) {
      return (
        <div className="text-xl bg-white p-6 rounded-lg border-2 border-blue-200 shadow-sm my-4">
          <div 
            className="text-center flex items-center justify-center"
            style={{ minHeight: '60px' }}
            dangerouslySetInnerHTML={{ __html: renderFormula(formula) }}
          />
        </div>
      )
    } else {
      return (
        <span 
          className="inline-flex items-center bg-gray-100 px-2 py-1 rounded text-sm border"
          dangerouslySetInnerHTML={{ __html: renderFormula(formula) }}
        />
      )
    }
  }

  // 处理包含数学公式的文本
  const processText = (text) => {
    const parts = []
    let lastIndex = 0
    
    // 处理块级公式
    const blockRegex = /\\\[([\s\S]*?)\\\]/g
    let match
    
    while ((match = blockRegex.exec(text)) !== null) {
      // 添加公式前的文本
      if (match.index > lastIndex) {
        const beforeText = text.slice(lastIndex, match.index)
        if (beforeText.trim()) {
          parts.push(<span key={`text-${parts.length}`}>{beforeText}</span>)
        }
      }
      
      // 添加公式
      parts.push(
        <MathFormula 
          key={`math-${parts.length}`} 
          formula={match[1].trim()} 
          isBlock={true} 
        />
      )
      
      lastIndex = match.index + match[0].length
    }
    
    // 添加剩余文本
    if (lastIndex < text.length) {
      const remainingText = text.slice(lastIndex)
      if (remainingText.trim()) {
        parts.push(<span key={`text-end`}>{remainingText}</span>)
      }
    }
    
    return parts.length > 0 ? parts : text
  }

  const testText = `
复合年增长率（CAGR）的计算公式为：

\\[ CAGR = \\left( \\frac{FV}{PV} \\right)^{\\frac{1}{n}} - 1 \\]

其中：
- FV 表示终值
- PV 表示现值  
- n 表示年数

根据我们的分析，该行业的CAGR约为8.5%。
`

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">数学公式渲染测试</h1>
      
      <div className="space-y-6">
        <div className="bg-gray-50 p-4 rounded-lg">
          <h2 className="text-lg font-semibold mb-3">测试文本：</h2>
          <div className="text-gray-700 leading-relaxed">
            {processText(testText)}
          </div>
        </div>
        
        <div className="bg-white p-4 border rounded-lg">
          <h2 className="text-lg font-semibold mb-3">单独的公式测试：</h2>
          
          <h3 className="font-medium mb-2">块级公式：</h3>
          <MathFormula formula="CAGR = \\left( \\frac{FV}{PV} \\right)^{\\frac{1}{n}} - 1" isBlock={true} />
          
          <h3 className="font-medium mb-2 mt-4">行内公式：</h3>
          <p>根据公式 <MathFormula formula="CAGR" isBlock={false} /> 我们可以计算增长率。</p>
        </div>
      </div>
    </div>
  )
}

export default MathTest

